import React,{ useEffect, useState } from 'react';
import arrowFall from '@/assets/icon/arrow-fall.svg';
import arrowRise from '@/assets/icon/arrow-rise.svg';
import { Data } from '@/types/main';
import { AppUtils } from '@/App';

enum STATS_TYPE {
  PROFIT,
  DOWNLOAD,
  CLICK,
  TRANSLATION,
}

interface ColProps {
  title: string;
  value: number;
}

interface StatsColProps extends Data {
  titleTop: string;
  valueTop?: number;
  titleBottom?: string;
  valueBottom?: number;
  selected: boolean;
  onClick: () => void;
  active?: boolean;
}

type Stats = Pick<
  StatsColProps,
  'titleTop' | 'valueTop' | 'titleBottom' | 'valueBottom' | 'type' | 'percent'
>;

interface StatsProps {
  profit: Stats;
  download: Stats;
  click: Stats;
  translation: Stats;
  callBack: Function;
}

function Col({ title, value }: ColProps) {
  return (
    <div>
      <div className="text-8 leading-140 text-7b md:text-14">{title}</div>
      <div className="text-16 text-ff leading-140 md:text-30">
        <span className="text-10 md:text-20 mr-2">$</span>
        {value}
      </div>
    </div>
  );
}

function StatsCol({
  titleTop,
  valueTop,
  titleBottom,
  valueBottom,
  selected,
  type,
  percent,
  onClick,
  active = false
}: StatsColProps) {
  const bottomEle =
    titleBottom !== undefined && valueBottom !== undefined ? (
      <Col title={titleBottom} value={valueBottom} />
    ) : null;

  return (
    <div className={`flex flex-1 ${active ? 'custom-border-outer rounded-sm': ''}`}>
      <div
        className={`relative bg-black flex flex-1 w-1/2 cursor-pointer flex-col justify-between rounded-sm px-3 py-4 md:h-[200px] md:w-[300px] md:px-6 md:py-8 ${selected ? 'border-main' : 'border-f3'} `}
        onClick={() => onClick()}
      >
        <Col title={titleTop} value={valueTop || 0} />
        {bottomEle}
        <div className="absolute bottom-2 right-2 flex items-center space-x-1 md:bottom-5 md:right-5 md:space-x-2">
          <span
            className={`text-8 md:text-14 ${type === 'fall' ? 'text-fall' : 'text-rise'}`}
          >
            {(type === 'fall' ? '-' : '+') + percent}
          </span>
          <span>
            <img
              className="h-[7px] w-[4px] md:h-[10px] md:w-[7px]"
              src={type === 'fall' ? arrowFall : arrowRise}
            />
          </span>
        </div>
      </div>
    </div>
  );
}

function Stats({ profit, download, click, translation, callBack }: StatsProps) {
  const [selected, setSelected] = useState(STATS_TYPE.PROFIT);
  const isProfit = selected === STATS_TYPE.PROFIT;
  const isDownload = selected === STATS_TYPE.DOWNLOAD;
  const isClick = selected === STATS_TYPE.CLICK;
  const isTranslation = selected === STATS_TYPE.TRANSLATION;

  useEffect(() => {
    callBack && callBack(['profit', 'invited_num', 'click_num'][selected]);
  }, [selected]);
  const appUtils = React.useContext(AppUtils);
  
  return (
    <div className="flex w-full flex-col space-y-3 xl:flex-row xl:space-x-[30px] xl:space-y-0">
      <div className="flex w-full justify-center space-x-3 xl:space-x-[30px]">
        <StatsCol
          active={!appUtils.isMobile}
          selected={isProfit}
          {...profit}
          onClick={() => setSelected(STATS_TYPE.PROFIT)}
        />
        <StatsCol
          selected={isDownload}
          {...download}
          onClick={() => setSelected(STATS_TYPE.DOWNLOAD)}
        />
      </div>
      <div className="flex w-full justify-center space-x-3 xl:space-x-[30px]">
        <StatsCol
          selected={isClick}
          {...click}
          onClick={() => setSelected(STATS_TYPE.CLICK)}
        />
        <StatsCol
          selected={isTranslation}
          {...translation}
          onClick={() => setSelected(STATS_TYPE.TRANSLATION)}
        />
      </div>
    </div>
  );
}

export default Stats;
